const ctx = new AudioContext();

const audioElement = document.createElement("audio");
audioElement.src = "audio/bluejeans.mp3";
audioElement.setAttribute("controls", "controls");

const inputElement = document.createElement("input");
inputElement.type = "range";
inputElement.min = 20;
inputElement.max = 20000;
inputElement.value = 1000;
inputElement.step = 10;
inputElement.setAttribute(
  "style",
  "display:block;width: 80%;margin: 100px auto;"
);

document.body.appendChild(audioElement);
document.body.appendChild(inputElement);

const sourceNode = ctx.createMediaElementSource(audioElement);
const filterNode = ctx.createBiquadFilter();
filterNode.type = "lowpass";
filterNode.frequency.value = 1000;
sourceNode.connect(filterNode);
filterNode.connect(ctx.destination);

inputElement.addEventListener("input", (e) => {
  filterNode.frequency.value = +e.target.value;
});
